<template>
  <div class="app-container">
    <div class="openSearch" @click="container=!container">
      <span>搜索/筛选借款</span>
      <span :class="{opencolor:container}">[{{container?"隐藏":"展开"}}]</span>
    </div>
    <div class="filter-container" v-if="container">
      <el-row style="padding-bottom:10px;">
        <span>角色名称</span>
        <el-input
          @keyup.enter.native="handleFilter"
          style="width: 200px;"
          class="filter-item"
          size="mini"
          placeholder="角色名称"
          v-model="params['companyName']"
        ></el-input>
      </el-row>
      <el-row style="padding-top:10px"> 
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          size="mini"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
      </el-row>
    </div>

    <el-table
      :data="list"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
    >
      <el-table-column prop="id" align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="merchantNo" align="center" label="商户编号" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.merchantNo}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="loginName" align="center" label="登录名" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.loginName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="状态" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.status | statusFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="companyName" align="center" label="企业名称" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.companyName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="companyAddress" align="center" label="企业地址" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.companyAddress}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="compnayLegal" align="center" label="企业法人" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.compnayLegal}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="accountType" align="center" label="账户类型" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.accountType}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="reccommendChannel" align="center" label="推荐渠道方" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.reccommendChannel}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" align="center" label="手机号码" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.mobile}}</span>
        </template>
      </el-table-column>
          <el-table-column prop="email" align="center" label="邮箱" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.email}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding" fixed="right">
        <template slot-scope="scope">
          <span type="danger" @click="handleCheck(scope.row,10)" v-if="scope.row.status !== 5"  style="color:red;padding-right:20px">驳回</span>
          <span type="success" @click="handleCheck(scope.row,5)" v-if="scope.row.status !== 10" >通过</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
var statusFilter ={
  1:"待审核",
  5:"驳回",
  10:"通过"
}
export default {
  data() {
    return {
      container: false,
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 20
      },
      cmsList:[],
      list:[],
      permissionsList:[],
      temp:{},
      rules: {
        roleName: [
          {
            required: true,
            message: "角色名称",
            trigger: "change",
            max: 50
          }
        ],
      }
    };
  },
  created() {
    this.loadData();
  },
  filters:{
    statusFilter(item){
      return statusFilter[item]
    }
  },
  methods: {
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleFilter () {
      this.loadData()
    },
    handleCheck(row,num){
      let status='';
      if(num === 5){
        status = 10;
      }else{
        status = 5;
      }
      this.$post('/admin/partner_merchant/check', {
        id: row.id,
        checkStatus:status
      }).then(data => {
        this.loadData()
      })
    },
    loadData(){ 
      this.$post("/admin/partner_merchant/list", this.params)
        .then(data => {
          this.list = data.dataList;
          this.total = data.total
        })
        .catch(_ => {
          console.log("Err",_)
        });
    },
  }
};
</script>
<style>
.el-table td, .el-table th{
  padding: 1px 0;
}
.el-table{
  font-size: 12px;
}
.opencolor{
  color: red;
}
.openSearch {
  margin-bottom: 10px;
  padding-bottom: 5px;
}
</style>